<template>
  <div class="mes_tree">
    <el-container>
      <el-header height="80px">
        <el-form @submit.native.prevent>
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            size="small"
            v-model="selectedDates"
            type="daterange"
            :picker-options="datePickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
          <el-input
            size="small"
            placeholder="请输入产品名/批次号"
            v-model.trim="keyword"
            clearable>
            <el-button size="mini" slot="append" icon="el-icon-search" native-type="submit"
                       @click="search()"></el-button>
          </el-input>
        </el-form>
      </el-header>
      <el-main v-loading="isLoading">
        <el-scrollbar style="height: 100%">
          <div class="search_empty" v-if="treeData.length === 0">
            <img width="120" src="@/assets/img/pic_default_empt_search.png" alt="">
            <p class="no_data">暂无数据</p>
          </div>
          <el-tree
            v-else
            :data="treeData"
            :props="defaultProps"
            :expand-on-click-node="false"
            accordion
            check-on-click-node
            highlight-current
            @node-click="handleNodeClick">
          </el-tree>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'MesTree',
  data() {
    return {
      datePickerOptions: {
        shortcuts: [{
          text: '最近半年',
          onClick: (picker) => {
            const start = this.moment().subtract(0.5, 'years').toDate()
            picker.$emit('pick', [start, this.moment().toDate()])
          }
        }, {
          text: '最近一年',
          onClick: (picker) => {
            const start = this.moment().subtract(1, 'years').toDate()
            picker.$emit('pick', [start, this.moment().toDate()])
          }
        }, {
          text: '最近三年',
          onClick: (picker) => {
            const start = this.moment().subtract(3, 'years').toDate()
            picker.$emit('pick', [start, this.moment().toDate()])
          }
        }]
      },
      selectedDates: [
        this.moment().subtract(0.5, 'years').format('YYYY-MM-DD 00:00:00'),
        this.moment().format('YYYY-MM-DD 23:59:59')
      ], // 选择的日期
      keyword: '', // 产品名/批次号
      defaultProps: [{
        children: 'children',
        label: 'label',
        id: 'workorderId'
      }],
      isLoading: true // 数据加载中
    }
  },
  computed: {
    treeData() { // 树数据
      return this.$store.state.workListBomTree.treeData
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.search()
    },
    // 搜索树数据
    search() {
      this.isLoading = true
      // 日期清空按钮后，处理日期数组
      if (this.selectedDates === null) {
        this.selectedDates = []
      }
      let req = {
        method: 'post',
        url: 'a/workorder/workorder/getbomtree',
        module: 'workListBomTree',
        state: 'treeData',
        data: {
          startDate: this.selectedDates[0] || undefined,
          endDate: this.selectedDates[1] || undefined,
          keyword: this.keyword.trim()
        }
      }
      this.$store.dispatch('saveData', req)
        .finally(() => {
          this.$emit('selectNode', undefined)
          this.isLoading = false
        })
    },
    // 树节点点击时，触发父组件
    handleNodeClick(data) {
      this.$emit('selectNode', data.workorderId)
    }
  }
}
</script>
